<template>
  <el-container direction="vertical">
    <el-header>
      <el-page-header @back="goBack" title="返回" :content="headerText"></el-page-header>
    </el-header>
    <el-main>
      <div class="block-wrap">

      </div>
    </el-main>
    <el-backtop target=".router-container">
      <el-popover
        placement="top-start"
        title="回到顶部"
        width="200"
        trigger="hover">
        <div>
          <p>回到顶部组件需要放到根组件下, 并放在最后</p>
        </div>
        <i slot="reference" class="el-icon-caret-top"></i>
      </el-popover>
    </el-backtop>
  </el-container>
</template>
<script>
  export default {
    data () {
      return {
        headerText: '编辑会议',
        detailForm: {},
        srcList: [
          'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          'http://photocdn.sohu.com/20120625/Img346436473.jpg',
          'http://k.zol-img.com.cn/dcbbs/22000/a21999018_01000.jpg',
          'http://b-ssl.duitang.com/uploads/item/201705/04/20170504161656_HXBG4.jpeg',
          'http://pic1.win4000.com/wallpaper/6/580487e53454e.jpg',
          'http://www.33lc.com/article/UploadPic/2012-9/201291210484236557.jpg'
        ]
      }
    },
    activated () { // 由于keepAlive的特性, 需要在此处写逻辑代码
      this.$store.commit('changeStatus', {key: 'loading', value: true})
      setTimeout(_ => {
        this.$store.commit('changeStatus', {key: 'loading', value: false})
      }, 1500)
    },
    methods: {
      /**
       * 回到列表页
       * @return {[type]} [description]
       */
      goBack () {
        this.$router.push({name: 'meeting'})
      },
      setLoading () {
        this.$store.commit('changeStatus', {key: 'loading', value: true})
        setTimeout(_ => {
          this.$store.commit('changeStatus', {key: 'loading', value: false})
        }, 1500)
      }
    }
  }
</script>